<template>
	<view class="page">
		<scroll-view  @scrolltolower="scrolltolower" scroll-y="true" enable-back-to-top="true" :style="{height: (windosHeight - 6) + 'px'}">
			<view class="list">
				<view class="fun-flex-row fun-items-center list-item"
					v-for="(item, index) in noticeList"
					:key="index"
					@click="toDetail(item)"
				>
					<image class="image_5"	src="@/static/more/notify.png" />
					
					<view class="fun-flex-col fun-flex-1 group">
						<text class="content">{{item.title}}</text>
						<text class="time">{{UTILS.setDateFormat(item.time)}}</text>
					</view>
					
					<view class="un-read" v-if='item.status == 1'></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {notificationsList} from "@/api/more.js"
	export default {
		data() {
			return {
				queryData:{
					page:1,
					limit:10,
					timeZone:8
				},
				noticeList:[],
				total:0,
				windosHeight:"" //可使用窗口高度(不包含NavigationBar和TabBar的高度)
			};
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					this.windosHeight = res.windowHeight
				}
			})
			this.queryData.timeZone = this.UTILS.getTimeZone();
			this.getNotificationsList()
		},

		methods: {
			getNotificationsList(){
				notificationsList(this.queryData).then(res => {
					if(res.code == 0){
						this.noticeList = this.noticeList?.concat(res?.data|| []) || [];
						this.total = res.count;
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			
			toDetail(item){
				uni.navigateTo({url:'/pages/more/notificationsDetail?objectId='+encodeURIComponent(item.objectId)})
			},
			
			// 触底加载更多
			scrolltolower(){
				if (this.total > this.noticeList.length) {
					this.queryData.page++;
					this.getNotificationsList();
				}
			},
		},
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		padding-top: 12rpx;
		.list {
			padding: 0 40rpx;

			.list-item {
				padding: 28rpx 0;
				background-color: #ffffff;
				border-bottom: solid 2rpx #efefef;

				.image_5 {
					border-radius: 50%;
					width: 70rpx;
					height: 70rpx;
				}

				.group {
					margin-left: 24rpx;
					.content {
						font-size: 24rpx;
						color: #222741;
						font-weight: 600;
					}
					.time{
						font-size: 24rpx;
						color: #ACAEBE;
						margin-top: 8rpx;
					}
				}
				.un-read{
					width: 12rpx;
					height: 12rpx;
					background: #0079FD;
					border-radius: 50%
				}
				
			}
		}
	}
</style>